<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng系列应用</title>
    <style>
        *{
            margin: 0;
        }
        fieldset{
            border: 1px solid #ccc;
            width: 46%;
            min-width: 200px;
            display: inline-block;
            vertical-align: top;
            margin-bottom: 15px;
        }
        .field-box{
            height:200px;
            overflow: auto;
        }
        .dl-1 dd{
            display: none;
        }
        .dl-1 .ng-show{
            display: block;
        }
        .dl-2 .ng-hide{
            display: none;
        }
        .dl-3{
            float: left;
            margin-right: 15px;
            margin-bottom: 15px;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/JsTpl.js"></script>
</head>
<body>
<fieldset>
    <legend>ng-show</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                a:'1',
                b:'2',
                c:'3',
                d:'4'
            }
        </pre>
        <xmp>
            模版
            <dl class="dl-1">
                <dt>默认下面都是隐藏的</dt>
                <dd ng-show="{{a}}==1">a==1的时候我会显示</dd>
                <dd ng-show="{{b}}==2">b==2的时候我会显示</dd>
                <dd ng-show="{{c}}==33">c==33的时候我会显示</dd>
                <dd ng-show="{{d}}==4">d==4的时候我会显示</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo1"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>ng-hide</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                a:'1',
                b:'2',
                c:'3',
                d:'4'
            }
        </pre>
        <xmp>
            模版
            <dl class="dl-2">
                <dt>默认下面都是显示的</dt>
                <dd ng-hide="{{a}}==1">a==1的时候我会隐藏</dd>
                <dd ng-hide="{{b}}==2">b==2的时候我会隐藏</dd>
                <dd ng-hide="{{c}}==33">c==33的时候我会隐藏</dd>
                <dd ng-hide="{{d}}==4">d==4的时候我会隐藏</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo2"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>ng-src</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                src:'../images/ex.jpg'
            }
        </pre>
        <xmp>
            模版
            <img ng-src="{{src}}" alt="">
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo3"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>ng-class</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                a:'1',
                b:'2',
                c:'3',
                d:'4'
            }
        </pre>
        <xmp>
            模版
            <dl>
                <dt>根据返回值确定添加类名</dt>
                <dd ng-class="ca-{{a}}==1">a==1的时候我会添加‘ca’</dd>
                <dd ng-class="cb-{{b}}==2">b==2的时候我会添加‘cb’</dd>
                <dd ng-class="cc-{{c}}==33">c==33的时候我会添加‘cc’</dd>
                <dd ng-class="cd-{{d}}==4">d==4的时候我会添加‘cd’</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo4"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>ng-if</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                a:'1',
                b:'2',
                c:'3',
                d:'4'
            }
        </pre>
        <xmp>
            模版
            <dl>
                <dt>根据返回判断是否显示</dt>
                <dd ng-if="{{a}}==1">a==1的时候我会显示</dd>
                <dd ng-if="{{b}}!=''">b!=''的时候我会显示</dd>
                <dd ng-if="{{c}}==33">c==33的时候我会显示</dd>
                <dd ng-if="{{d}}!=4">d!=4的时候我会显示</dd>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo5"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>ng-repeat(1)</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                title:"一层循环",
                lists:[
                    {txt:'内容1哦'},
                    {txt:'内容2哦'},
                    {txt:'内容3哦'},
                    {txt:'内容4哦'},
                    {txt:'内容5哦'},
                    {txt:'内容6哦'}
                ]
            }
        </pre>
        <xmp>
            模版
            <dl>
                <dt>{{title}}</dt>
                <ng-repeat repeat="lists">
                    <dd>{{ngRid}}:{{txt}}</dd>
                </ng-repeat>
            </dl>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo6"></pre>
    </div>
</fieldset>

<fieldset>
    <legend>ng-repeat(2)</legend>
    <div class="field-box">
        <pre>
            数据
            json:
            {
                title:"二层循环",
                lists:[
                    {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'}]},
                    {title:"子标题",sec:[{con:'子内容'},{con:'子内容'}]},
                    {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'}]},
                    {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'},{con:'子内容'}]},
                    {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'}]}
                ]
            }
        </pre>
        <xmp>
            模版
            <h2>{{title}}</h2>
            <ng-repeat repeat="lists">
                <dl class="dl-3">
                    <dt>{{ngRid}}:{{title}}</dt>
                    <ngc-repeat repeat="sec">
                        <dd>{{ngRid}}:{{con}}</dd>
                    </ngc-repeat>
                </dl>
            </ng-repeat>
        </xmp>
    </div>
</fieldset>
<fieldset>
    <legend>展示效果</legend>
    <div class="field-box">
        <pre class="demo7"></pre>
    </div>
</fieldset>
<script type="text/template" id="demo1">
    <dl class="dl-1">
        <dt>默认下面都是隐藏的</dt>
        <dd ng-show="{{a}}==1">a==1的时候我会显示</dd>
        <dd ng-show="{{b}}==2">b==2的时候我会显示</dd>
        <dd ng-show="{{c}}==33">c==33的时候我会显示</dd>
        <dd ng-show="{{d}}==4">d==4的时候我会显示</dd>
    </dl>
</script>
<script type="text/template" id="demo2">
    <dl class="dl-2">
        <dt>默认下面都是显示的</dt>
        <dd ng-hide="{{a}}==1">a==1的时候我会隐藏</dd>
        <dd ng-hide="{{b}}==2">b==2的时候我会隐藏</dd>
        <dd ng-hide="{{c}}==33">c==33的时候我会隐藏</dd>
        <dd ng-hide="{{d}}==4">d==4的时候我会隐藏</dd>
    </dl>
</script>
<script type="text/template" id="demo3">
    <img ng-src="{{src}}" alt="">
</script>
<script type="text/template" id="demo4">
    <dl>
        <dt>根据返回值确定添加类名</dt>
        <dd ng-class="ca-{{a}}==1">a==1的时候我会添加‘ca’</dd>
        <dd ng-class="cb-{{b}}==2">b==2的时候我会添加‘cb’</dd>
        <dd ng-class="cc-{{c}}==33">c==33的时候我会添加‘cc’</dd>
        <dd ng-class="cd-{{d}}==4">d==4的时候我会添加‘cd’</dd>
    </dl>
</script>
<script type="text/template" id="demo5">
    <dl>
        <dt>根据返回判断是否显示</dt>
        <dd ng-if="{{a}}==1">a==1的时候我会显示</dd>
        <dd ng-if="{{b}}!=''">b!=''的时候我会显示</dd>
        <dd ng-if="{{c}}==33">c==33的时候我会显示</dd>
        <dd ng-if="{{d}}!=4">d!=4的时候我会显示</dd>
    </dl>
</script>
<script type="text/template" id="demo6">
    <dl>
        <dt>{{title}}</dt>
        <ng-repeat repeat="lists">
            <dd>{{ngRid}}:{{txt}}</dd>
        </ng-repeat>
    </dl>
</script>
<script type="text/template" id="demo7">
    <h2>{{title}}</h2>
    <ng-repeat repeat="lists">
        <dl class="dl-3">
            <dt>{{ngRid}}:{{title}}</dt>
            <ngc-repeat repeat="sec">
                <dd>{{ngRid}}:{{con}}</dd>
            </ngc-repeat>
        </dl>
    </ng-repeat>
</script>
<script>
    var json1={
        a:'1',
        b:'2',
        c:'3',
        d:'4'
    };
    JsTpl('.demo1').render(json1,'demo1');
    JsTpl('.demo2').render(json1,'demo2');
    var json3={
        src:'../images/ex.jpg'
    };
    JsTpl('.demo3').render(json3,'demo3');

    JsTpl('.demo4').render(json1,'demo4');
    JsTpl('.demo5').render(json1,'demo5');

    var json6={
        title:"一层循环",
        lists:[
            {txt:'内容1哦'},
            {txt:'内容2哦'},
            {txt:'内容3哦'},
            {txt:'内容4哦'},
            {txt:'内容5哦'},
            {txt:'内容6哦'}
        ]
    };
    JsTpl('.demo6').render(json6,'demo6');
    var json7={
        title:"二层循环",
        lists:[
            {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'}]},
            {title:"子标题",sec:[{con:'子内容'},{con:'子内容'}]},
            {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'}]},
            {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'},{con:'子内容'}]},
            {title:"子标题",sec:[{con:'子内容'},{con:'子内容'},{con:'子内容'}]}
        ]
    };
    JsTpl('.demo7').render(json7,'demo7');
</script>
</body>
</html>
